<template>
    <a-layout class="main">
      <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
        <div class="logo" style="background: #0814b4; height:50px; padding:5px"/>

        <a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys" @click="handleClick">
          <a-menu-item key="nav1">
            <user-outlined />
            <span>nav 1</span>
          </a-menu-item>
          <a-menu-item key="nav2">
            <video-camera-outlined />
            <span>nav 2</span>
          </a-menu-item>
          <a-menu-item key="nav3">
            <upload-outlined />
            <span>nav 3</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header style="background: #fff; padding: 0">
          <menu-unfold-outlined
            v-if="collapsed"
            class="trigger"
            @click="() => (collapsed = !collapsed)"
          />
          <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
        </a-layout-header>
        <a-layout-content
          :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px',height:'700px' }"
        >
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </template>
  <script lang="ts" setup>
  import type { MenuProps } from 'ant-design-vue';
  import {
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
  } from '@ant-design/icons-vue';
  import {  ref } from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter()
const selectedKeys=ref<string[]>(['1'])
const collapsed=ref<boolean>(false)
const handleClick:MenuProps['onClick']=({key=''})=>{
    router.push({name:key+''})
  }
 

  </script>
  <style>
  .main{
    height: 100%;
  }
  #components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }
  
  #components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
  }
  
  #components-layout-demo-custom-trigger .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.3);
    margin: 16px;
  }
  
  .site-layout .site-layout-background {
    background: #fff;
    height: 100%;
  }
  </style>
  